import styles from "./css/Home.module.css";
import { useEffect, useState } from "react";
import { dishList, likeDish, collectDish, hotKeyList } from "./service";
import { SearchOutline, MoreOutline, CloseOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { ProductCard, Tag, Button, List, PullRefresh } from 'react-vant';
import Card from "./Card";
import { Input } from 'react-vant';

export default function () {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const [finished, setFinished] = useState(false);
  const [wait, setWait] = useState(false);

  const loadData = async (id) => {
    setFinished(false);
    let { data } = await hotKeyList({ pageNum: page, pageSize: 10 });
    console.log(data);
    setList(data.data);
    setFinished(true)
    setPage(page + 1)
  }

  useEffect(() => {
    loadData()
  }, [])

  function color(idx) {
    return idx < 3 ? "red" : "";
  }

  return (
    <div>
      <NavBar
        onBack={() => { navigate(-1) }}
        style={{
          marginBottom: "12px",
        }}>
        <Input
          onChange={() => { loadData() }}
          suffix={<Button size="small" type="primary">搜索</Button>}
          placeholder="搜索"
        />
      </NavBar>
      <PullRefresh onRefresh={async () => await loadData(true)}>
        <List finished={finished} onLoad={loadData} style={{
          display: "flex",
          flexDirection: "column",
          marginLeft: "30vw"
        }}>{
            list.map((item, idx) => {
              return (
                <div key={item.id} style={{
                  fontSize: "20px",
                  marginTop: "16px",
                  color: color(idx),
                }}>{idx + 1}.{item.keyword}</div>
              )
            })}
        </List>
      </PullRefresh>
    </div >
  )
}